<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Deploy Main</title>
		<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">

		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/plugins/morris.css" rel="stylesheet">
		<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

		<script type="text/javascript" src="easyui/jquery.min.js"></script>
		<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

	</head>

	<body>
		<style type="text/css">
			.panel-body {
				padding: 0px;
			}
		</style>
		<div>
			<div id="base">
				<div>
					<input type="button" value="Add New Deployment" class="btn btn-primary" onclick="javascript:$('#p_dep_add').show()" />
				</div>
				<div style="margin: 10px;" class="panel panel-default" id="p_dep_add">
					<table class="table">
						<tr>
							<td width="100px" style="text-align: right;"><label class="control-label">项目名字:</label></td>
							<td><input id="tx_dep_name" type="text" class="form-control" placeholder="name" /> </td>
						</tr>
						<tr>
							<td width="100" style="text-align: right;"><label>描述:</label></td>
							<td>
								<textarea id="tx_dep_desc" class="form-control" placeholder="description"></textarea>
							</td>
						</tr>
						<tr>
							<td>
							</td>
							<td>
								<input type="button" value="save" class="btn btn-primary" />
								<input type="button" value="cancle" class="btn btn-default" onclick="javascript:$('#p_dep_add').hide()" />
							</td>
						</tr>
					</table>
				</div>
			</div>

			<div>
				<table class="easyui-datagrid" title="部署项目" style="width:800px;height:400px;" data-options="singleSelect:true,collapsible:true,url:'json/datagrid_data1.json',method:'get'">
					<thead>
						<tr>
							<th data-options="field:'name',width:140">项目名字</th>
							<th data-options="field:'descp',width:540">描述</th>
							<th data-options="field:'id',width:100,align:'center', formatter:dep_ops">操作</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
		
		<script>
			$("#p_dep_add").hide();
			function dep_ops(value, row, index)
			{
				console.log(value);
				var ops='<a href="javascript:;"  class="btn" onclick="dep_ops_del('+value+')"><i class="fa fa-trash"></i></a>'
				console.log(ops);
				return ops;
			}
			
			function dep_ops_del(id)
			{
				alert("del "+ id);
			}
			
		</script>

	</body>

</html>